* {
    margin : 0;
    padding: 0;
}

/* 白色主题 */
/* :root {
    --color-menu-bg       : #fff;
    --font-color-mi       : #000;
    --font-color-mi-hover : #1890ff;
    --color-bg-mi-hover   : #ececec;
    --border-radius-mi    : 2px;
    --transition-menu-time: 0.2s;
    --color-line-bg       : #d3d3d3;
} */

/*黑色主题，使用时把上面的白色主题注释掉，启用下面的css代码*/
:root {
    --color-bg            : #e7e7e7;
    --color-menu-bg       : #232324;
    --font-color-mi       : #c9cdd4;
    --font-color-mi-hover : #a649d1;
    --color-bg-mi-hover   : #303030;
    --border-radius-mi    : 2px;
    --transition-menu-time: 0.2s;
    --color-line-bg       : #333333;
}

/* 验证码管理系统标题 */
h2 {
    font-family  : 'Lucida Calligraphy', cursive, serif, sans-serif;
    margin-bottom: 32px;
    margin-top   : 20px;
}

/* main中页面标题 */
h1 {

    font-family: 'Lucida Calligraphy', cursive, serif, sans-serif;
}

/* 引用图标样式设置 */
.icon {
    width         : 1.5em;
    height        : 1.5em;
    vertical-align: -0.15em;
    fill          : currentColor;
    overflow      : hidden;
}

/* 设置整个页面盒子的样式 */
.content {
    background-color: #e7e7e7;
    min-height      : 100vh;
    display         : flex;
    justify-content : flex-start;
}

/* 设置列表中删除按钮样式 */
.btn {
    display    : inline-block;
    position   : relative;
    width      : 60px;
    height     : 30px;
    line-height: 30px;
    margin-left: 520px;
    bottom     : 10px;
    font-weight: bold;
    margin-top : 35px;
}

.btn {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    padding         : 1em;
    border          : 0px solid transparent;
    background-color: rgba(156, 12, 234, 0.2);
    border-radius   : 1.25em;
    transition      : all 0.2s linear;
}

.btn:hover {
    box-shadow: 3.4px 2.5px 4.9px rgba(0, 0, 0, 0.025),
        8.6px 6.3px 12.4px rgba(0, 0, 0, 0.035),
        17.5px 12.8px 25.3px rgba(0, 0, 0, 0.045),
        36.1px 26.3px 52.2px rgba(0, 0, 0, 0.055),
        99px 72px 143px rgba(0, 0, 0, 0.08);
}

/* 设置列表每一项样式 */
.li {
    background-color: rgba(255, 255, 255, 0.6);
    border          : 1px solid #ccc;
    height          : 80px;
    list-style      : none;
    margin-bottom   : 10px;
    display         : flex;
    justify-content : space-around;
}

/* 添加列表每一项一条竖线 */
.div {
    width       : 2px;
    height      : 70px;
    border-right: 2px solid #ccc;
    position    : relative;
    left        : 260px;
    top         : 5px;
}

/* 设置列表整体样式 */
#box {
    margin-top: 50px;
    width     : 100%;
    height    : 550px;
    overflow  : auto;
}

#box::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

#box::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius     : 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background        : #E5E5E5;
}

#box::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius     : 10px;
    background        : #ffffff;
}


/* 设置列表中验证码图片的样式 */
img {
    display    : block;
    height     : 70px;
    line-height: 80px;
    margin-top : 5px;
}

/* 设置右边盒子的样式 */
#main {
    width     : 1000px;
    height    : 750px;
    text-align: center;
    margin    : 0 auto;
    margin-top: 50px;

}

/* 设置画布和提交按钮共同盒子样式 */
#check {
    margin-top     : 80px;
    width          : 400px;
    margin         : 0 auto;
    display        : flex;
    justify-content: space-between;
    margin-top     : 40px;
}


/* 设置提交按钮样式 */
#inp {
    margin-top           : 10px;
    --glow-color         : rgb(217, 176, 255);
    --glow-spread-color  : rgba(191, 123, 255, 0.781);
    --enhanced-glow-color: rgb(231, 206, 255);
    --btn-color          : rgb(100, 61, 136);
    border               : .25em solid var(--glow-color);
    padding              : 1em 3em;
    color                : var(--glow-color);
    font-size            : 15px;
    font-weight          : bold;
    background-color     : var(--btn-color);
    border-radius        : 1em;
    outline              : none;
    box-shadow           : 0 0 1em .25em var(--glow-color),
        0 0 4em 1em var(--glow-spread-color),
        inset 0 0 .75em .25em var(--glow-color);
    text-shadow: 0 0 .5em var(--glow-color);
    position   : relative;
    transition : all 0.3s;
}

#inp::after {
    pointer-events  : none;
    content         : "";
    position        : absolute;
    top             : 120%;
    left            : 0;
    height          : 100%;
    width           : 100%;
    background-color: var(--glow-spread-color);
    filter          : blur(2em);
    opacity         : .7;
    transform       : perspective(1.5em) rotateX(35deg) scale(1, .6);
}

#inp:hover {
    color           : var(--btn-color);
    background-color: var(--glow-color);
    box-shadow      : 0 0 1em .25em var(--glow-color),
        0 0 4em 2em var(--glow-spread-color),
        inset 0 0 .75em .25em var(--glow-color);
}

#inp:active {
    box-shadow: 0 0 0.6em .25em var(--glow-color),
        0 0 2.5em 2em var(--glow-spread-color),
        inset 0 0 .5em .25em var(--glow-color);
}

/* 设置侧边栏的样式 */
.menu-box {
    font-family     : 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    letter-spacing  : 0.5px;
    font-weight     : 600;
    position        : relative;
    width           : fit-content;
    min-height      : 100vh;
    padding         : 6px 12px;
    box-sizing      : border-box;
    background-color: var(--color-menu-bg);


}

.menu-box input[type='checkbox'] {
    display: none;
}

.menu-box>label {
    position        : absolute;
    top             : 48%;
    right           : 0;
    transform       : translateX(50%);
    width           : 20px;
    height          : 20px;
    border-radius   : 20px;
    box-shadow      : 0px 0px 4px 0px #000;
    background-color: var(--color-menu-bg);
    color           : var(--font-color-mi);
    display         : flex;
    justify-content : center;
    align-items     : center;
    overflow        : hidden;
}


.menu-box>label:hover {
    box-shadow: 0px 0px 2px 0px #000;
    color     : var(--font-color-mi-hover);
}

.menu-box>input#menu-btn:checked+label>i {
    transform: rotate(180deg);
}

.menu {
    font-size : 18px;
    width     : 220px;
    min-height: 100%;
    cursor    : pointer;
    overflow  : hidden;
    transition: width var(--transition-menu-time);
    color     : var(--font-color-mi);
}

.menu-box>input#menu-btn:checked~.menu {
    width: 0;
}

.menu-title {
    text-align   : center;
    margin-bottom: 10px;
    margin-top   : 50px;
}

.menu-item>label {
    position     : relative;
    width        : 100%;
    height       : 50px;
    border-radius: var(--border-radius-mi);
    display      : flex;
    align-items  : center;
}

.menu-item>label:hover {
    color: var(--font-color-mi-hover);
}


.menu-item>label>span {
    flex       : 1;
    margin-left: 15px;
}

.set-line {
    margin          : 30px 0 10px 0;
    width           : 100%;
    height          : 2px;
    background-color: var(--color-line-bg);

}


/* 设置退出登录按钮样式 */
#backBtn {
    display         : flex;
    height          : 3em;
    width           : 100px;
    align-items     : center;
    justify-content : center;
    background-color: #eeeeee4b;
    border-radius   : 3px;
    letter-spacing  : 1px;
    transition      : all 0.2s linear;
    cursor          : pointer;
    border          : none;
    background      : #fff;
    margin-left     : 50px;
    margin-top      : 50px;
}

#backBtn>svg {
    margin-right: 5px;
    margin-left : 5px;
    font-size   : 20px;
    transition  : all 0.4s ease-in;
}

#backBtn:hover>svg {
    font-size: 1.2em;
    transform: translateX(-5px);
}

#backBtn:hover {
    box-shadow: 9px 9px 33px #d1d1d1, -9px -9px 33px #ffffff;
    transform : translateY(-2px);
}